<template>
  <div class="project-list-index">
    <wrapper-content :showHeader="false">

      <div class="action">
        <a-button type="primary" icon="plus" @click="doAction(null,'new')" v-if="false">创建新项目</a-button>
        <a-button type="primary" @click="doAction(null,'join')">加入项目</a-button>
      </div>
      <!-- <template>
        <a-tree
          class="draggable-tree"
          :default-expanded-keys="expandedKeys"
          draggable
          :tree-data="gData"
          @dragenter="onDragEnter"
          @drop="onDrop"
        />
      </template> -->

      <template>
        <!-- :data-source="dataSource" -->
        <a-table
            :data-source="dataSource"

            :columns="columns"
            childrenColumnName="children"
            :loading="loading"
            rowKey="code"

        >
          <!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
                {{ record.children }}
              </p> -->
          <template slot="name" slot-scope="text,record,index">

            <router-link :to="'/project/space/task/' + record.code">{{record.name}}</router-link>
            <!--            <a-tag color="green" class="m-l" v-show="!item.privated">公开</a-tag>-->
            <a-tag color="green" class="m-l" v-show="record.privated==0">公开</a-tag>

          </template>

          <template slot="schedule" slot-scope="text,record,index">
            <div class="info-item schedule">

              <a-progress :strokeWidth="5" :percent="record.schedule"/>
            </div>
          </template>


          <template slot="action" slot-scope="text,record,index">
            <span slot="actions" @click="inviteProjectMember(record)">
              <a-tooltip title="添加成员">
                <a-icon type="user-add" />
                {{ record.member_count }}
              </a-tooltip>
            </span>
            <a-divider type="vertical" />

            <!-- <a-icon slot="actions" type="delete" @click="doAction(record,'del',index)" /> -->


            <!-- <a-divider type="vertical" /> -->

            <span slot="actions" @click="doAction(record,'edit',index)">
              <a-tooltip title="项目设置">
                <a-icon type="setting" />
              </a-tooltip>
            </span>
            <a-divider type="vertical" />

            <span slot="actions">
              <a-tooltip
                  :title="record.collected ? '取消收藏' : '加入收藏'"
                  @click="doAction(record,'collect',index)"
              >
                <a-icon type="star" v-show="!record.collected" />
                <a-icon
                    type="star"
                    theme="filled"
                    style="color: #ffaf38;"
                    v-show="record.collected"
                />
              </a-tooltip>
            </span>

            <a-divider type="vertical" />

            <span slot="actions">
              <a-tooltip
                  :title="record.is_my == 1 ? '退出项目' : '加入项目'"
                  @click="doAction(record,record.is_my == 1 ? 'quit' : 'joinProject',index)"
              >
              <span v-show="record.is_my == 1 ">
                <a-icon type="minus-circle" theme="filled" style="color: lightseagreen;"  /><span style="margin-left:5px">已加入</span>
              </span>
                
                <a-icon type="plus-circle" v-show="record.is_my != 1" />
              </a-tooltip>
            </span>


          </template>



        </a-table>
      </template>




      <!--      <template>-->
      <!--        <a-table-->

      <!--            :columns="columns"-->
      <!--            :loading="loading"-->
      <!--            :dataSource="dataSource"-->
      <!--            bordered-->
      <!--        >-->

      <!--        </a-table>-->
      <!--      </template>-->
      <!--            <a-list-->
      <!--                    class="project-list"-->
      <!--                    :loading="loading"-->
      <!--                    itemLayout="horizontal"-->
      <!--                    :dataSource="dataSource"-->
      <!--            >-->
      <!--                <div v-if="showLoadingMore" slot="loadMore"-->
      <!--                     :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">-->
      <!--                    <a-spin v-if="loadingMore"/>-->
      <!--                    <a-button v-else @click="onLoadMore">查看更多项目</a-button>-->
      <!--                </div>-->
      <!--                <a-list-item slot="renderItem" slot-scope="item,index">-->
      <!--                    <span slot="actions" @click="inviteProjectMember(item)">-->
      <!--                         <a-tooltip title="添加成员">-->
      <!--                             <a-icon type="user-add"/>-->
      <!--                         </a-tooltip>-->
      <!--                    </span>-->
      <!--                    <span slot="actions" @click="doAction(item,'del',index)">-->
      <!--                         <a-tooltip title="移至回收站">-->
      <!--                              <a-icon type="delete"/>-->
      <!--                         </a-tooltip>-->
      <!--                    </span>-->
      <!--                    <span slot="actions" @click="doAction(item,'edit',index)">-->
      <!--                         <a-tooltip title="项目设置">-->
      <!--                              <a-icon type="setting"/>-->
      <!--                         </a-tooltip>-->
      <!--                    </span>-->
      <!--                    <span slot="actions">-->
      <!--                         <a-tooltip :title="item.collected ? '取消收藏' : '加入收藏'" @click="doAction(item,'collect',index)">-->
      <!--                             <a-icon type="star" v-show="!item.collected"/>-->
      <!--                             <a-icon type="star" theme="filled" style="color: #ffaf38;" v-show="item.collected"/>-->
      <!--                         </a-tooltip>-->
      <!--                    </span>-->
      <!--                    <a-list-item-meta-->
      <!--                            :description="item.description"-->
      <!--                    >-->
      <!--                        <div slot="title">-->
      <!--                            <router-link :to="'/project/space/task/' + item.code">{{item.name}}</router-link>-->
      <!--                            <a-tag color="green" class="m-l" v-show="!item.privated">公开</a-tag>-->
      <!--                        </div>-->
      <!--                        <a-avatar slot="avatar" icon="user" :src="item.cover"/>-->
      <!--                    </a-list-item-meta>-->
      <!--                    <div class="other-info muted">-->
      <!--                        <div class="info-item">-->
      <!--                            <span>创建日期</span>-->
      <!--                            <span>{{moment(item.create_time).format('YYYY-MM-DD')}}</span>-->
      <!--                        </div>-->
      <!--                        <div class="info-item">-->
      <!--                            <span>创建人</span>-->
      <!--                            <span>{{item.owner_name}}</span>-->
      <!--                        </div>-->
      <!--                        <div class="info-item schedule">-->
      <!--                            <span>进度</span>-->
      <!--                            <a-progress :strokeWidth="5" :percent="item.schedule"/>-->
      <!--                        </div>-->
      <!--                    </div>-->
      <!--                </a-list-item>-->
      <!--            </a-list>-->
    </wrapper-content>
    <a-modal
        destroyOnClose
        :width="720"
        v-model="actionInfo.modalStatus"
        :title="actionInfo.modalTitle"
        :bodyStyle="{paddingBottom:'1px'}"
        :footer="null"
        @cancel="cancelJoin"
        :maskClosable="false"
    >
      <a-form @submit.prevent="handleSubmit" :form="form">
        <a-form-item>
          <a-select
                v-if="actionInfo.modalTitle == '加入项目'"
                placeholder="项目名称（必填）"
                size="large"
                v-decorator="[
                      'project_code',
                      {rules: [{ required: true, message: '请输入项目名称' }]}
                      ]">
              <a-select-option v-for="(member, index) in projectList"
                                :value="member.code" :key="member.code">
                  {{member.desc}}
              </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input
              v-if="actionInfo.modalTitle != '加入项目'"
              placeholder="项目名称（必填）"
              v-decorator="[
                                            'name',
                                            {rules: [{ required: true, message: '请输入项目名称' }]}
                                            ]"
          />
        </a-form-item>
        <a-form-item>
          <a-select placeholder="项目模板" v-decorator="['templateCode']" v-if="actionInfo.modalTitle != '加入项目'">
            <a-select-option :key="0">空白项目</a-select-option>
            <a-select-option :key="template.code" v-for="template in templateList">{{template.name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-select placeholder="等级" v-decorator="['code']" v-if="actionInfo.modalTitle != '加入项目'">
            <a-select-option :key="p1.code" v-for="p1 in dataSource">{{p1.name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-textarea placeholder="项目简介" :rows="2" v-decorator="['description']" v-if="actionInfo.modalTitle != '加入项目'"/>
        </a-form-item>
        <a-form-item>
          <div class="action-btn">
            <a-button
                type="primary"
                htmlType="submit"
                block
                size="large"
                :loading="actionInfo.confirmLoading"
                class="middle-btn"
            >完成并创建</a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
        destroyOnClose
        class="project-config-modal"
        :width="800"
        v-model="projectModal.modalStatus"
        :title="projectModal.modalTitle"
        :footer="null"
        :maskClosable="false"
    >
      <project-config :code="currentProjectCode" @update="updateProject"></project-config>
    </a-modal>
    <invite-project-member
        v-model="showInviteMember"
        :project-code="currentProjectCode"
        v-if="showInviteMember"
    ></invite-project-member>
  </div>
</template>

<script>
    import inviteProjectMember from '../../../components/project/inviteProjectMember'
    import projectConfig from '@/components/project/projectConfig'
    import {list, doData, recycle, quit, save} from '@/api/project';
    import {checkResponse} from '@/assets/js/utils';
    import pagination from "@/mixins/pagination";
    import moment from 'moment';
    import {collect} from "../../../api/projectCollect";
    import {list as projectTemplates} from "../../../api/projectTemplate";
    import {notice} from "@/assets/js/notice";
    
    const columns = [
      {
        key: 'name',
        title: "项目名称",
        dataIndex: "name",
        width: "15%",
        scopedSlots: { customRender: 'name' },
      },
      {
        key: 'description',
        title: "项目简介",
        dataIndex: "description",
        width: "15%",
      },
      {
        // key: 'create_time',
        // title: "创建日期",
        // dataIndex: "create_time",
        key: 'git_tsp',
        title: "git更新日期",
        dataIndex: "git_tsp",
        width: "13%",
        // scopedSlots: {
        //   customRender: "create_time",
        // },
      },
      {
        key: 'git_history',
        title: "git更新信息",
        dataIndex: "git_history",
        // width: "35%",
      },
      {
        key: 'schedule',
        title: "项目进度",
        dataIndex: "schedule",
        width: "10%",
        scopedSlots: {
          customRender: "schedule",
        },
      },
      {
        key: 'action',
        title: "操作",
        dataIndex: "action",
        width: "20%",
        scopedSlots: {
          customRender: "action",
        },
      },


    ];

    export default {
        components: {
            inviteProjectMember,
            projectConfig
        },
        mixins: [pagination],
        data() {
            return {
              columns,
                dataSource: [],
                loading: true,
                showLoadingMore: false,
                loadingMore: false,
                showInviteMember: false,
                currentProject: {},
                currentProjectCode: 0,
                currentProjectIndex: 0,
                newData: {
                    code: ''
                },
                form: this.$form.createForm(this),
                searchForm: {},
                actionInfo: {
                    modalStatus: false,
                    confirmLoading: false,
                    modalTitle: '编辑项目',
                },
                /*项目设置*/
                projectModal: {
                    modalStatus: false,
                    modalTitle: '项目设置',
                },
                templateList: [],
                projectList:[],
            }
        },
        watch: {
            $route: function () {
                this.init();
            },
            'projectModal.modalStatus': function(v, v2) {
              if(!v){
                this.init(true, false)
              }
            }
        },
        created() {
            this.init().then(() => {
              return this.projectTemplates();
            }).then(() => {
              if(this.getUrlQuery('join') == 1) {
                  this.doAction(null,'join')
              }
            })
        },
        methods: {
            moment,
            init(reset = true, fetchGit = true) {
                let app = this;
                if (reset) {
                    this.dataSource = [];
                    this.pagination.page = 1;
                    this.pagination.pageSize = 1000;
                    this.showLoadingMore = false;
                }
                this.requestData.type = this.$route.params.type;
                app.loading = true;
                return list(app.requestData).then(res => {
                    this.fixResList(res);
                    res.data.list.map(ele => {
                      if(ele.last_git_update_time) {
                        ele.git_tsp = ele.last_git_update_time
                      }
                      if(ele.last_git_update_info) {
                        let last_git_update_info = JSON.parse(ele.last_git_update_info)
                        ele.git_history = last_git_update_info.map((e, index) => '【'+e.name+'】'+e.committer.split('/')[0]+'更新于'+e.tsp).join('\n')
                      }

                    })
                    app.dataSource = app.dataSource.concat(res.data.list);
                    app.pagination.total = res.data.total;
                    app.showLoadingMore = app.pagination.total > app.dataSource.length;
                    app.loading = false;
                    app.loadingMore = false
                    if(fetchGit) {
                      this.getGitInfo();
                    }
                });
            },
            cancelJoin() {
              if(this.getUrlQuery('join') == 1) {
                  window.close()
              }
            },
            getGitInfo() {
              let ele = this.dataSource.find(e => !e.fetch_git_done)
              if(ele) {
                list({type:'branchesLast:'+ele.name}).then(res => {
                  ele.fetch_git_done = 1
                  let last_git_update_info = res.data
                  if(last_git_update_info && last_git_update_info.length) {
                    ele.last_git_update_info = JSON.stringify(last_git_update_info)
                    ele.git_history = last_git_update_info.map(e => '【'+e.name+'】'+e.committer.split('/')[0]+'更新于'+e.tsp).join('\n')
                  }
                  setTimeout(this.getGitInfo, 10)
                })
              }
            },
            projectTemplates() {
                return projectTemplates({pageSize: 100, viewType: -1}).then(res => {
                    this.fixResList(res);
                    this.templateList = res.data.list;
                });
            },
            onLoadMore() {
                this.loadingMore = true;
                this.pagination.page++;
                this.init(false);
            },
            inviteProjectMember(item) {
                this.currentProject = item;
                this.currentProjectCode = item.code;
                this.showInviteMember = true;
            },
            doAction(record, action, index) {
                this.currentProject = record;
                this.currentProjectIndex = index;
                let app = this;
                app.newData = {id: 0};
                if (action == 'new') {
                    setTimeout(function () {
                        app.form && app.form.resetFields();
                    }, 0);
                    app.actionInfo.modalStatus = true;
                    app.actionInfo.modalTitle = '创建项目';
                } else if (action == 'join') {
                  list({type:'join'}).then(res => {
                    this.fixResList(res);
                    app.projectList = res.data.list
                    app.projectList.map(ele => {
                      if(!ele.description) {
                        ele.description = ''
                      }
                      ele.desc = ele.name+' - '+ele.description
                      if(ele.git_update_recent_info != '1;' && ele.last_git_update_time) {
                        ele.desc += ' - 最近改动 '+ ele.last_git_update_time
                      } else if (ele.last_git_update_time) {
                        ele.desc += ' - 上次改动 ' + ele.last_git_update_time
                      }

                      if(ele.last_git_update_info) {
                        let last_git_update_info = JSON.parse(ele.last_git_update_info)
                        if(last_git_update_info.length) {
                          last_git_update_info = last_git_update_info.map((e, index) => '【' + e.name+'】'+e.committer.split('/')[0]+'更新于'+e.tsp)
                          ele.git_history = last_git_update_info.join('\n')
                          ele.desc += '，' + last_git_update_info[0]
                        }
                      }

                      list({type:'branchesLast:'+ele.name}).then(res => {
                        app.dataSource.map(e => {
                          if(e.name == ele.name) {
                            let last_git_update_info = res.data
                            if(last_git_update_info && last_git_update_info.length) {
                              ele.last_git_update_info = JSON.stringify(last_git_update_info)
                              last_git_update_info = last_git_update_info.map((e2, index) => '【'+e2.name+'】'+e2.committer.split('/')[0]+'更新于'+e2.tsp)
                              ele.git_history = last_git_update_info.join('\n')
                              if(ele.git_update_recent_info != '1;' && ele.last_git_update_time) {
                                ele.desc += ' - 最近改动 '+ ele.last_git_update_time
                              } else if (ele.last_git_update_time) {
                                ele.desc += ' - 上次改动 ' + ele.last_git_update_time
                              }
                              ele.desc += last_git_update_info[0]

                            }
                          }
                        })
                      })
                    })
                    setTimeout(function () {
                        app.form && app.form.resetFields();
                    }, 0);
                    app.actionInfo.modalStatus = true;
                    app.actionInfo.modalTitle = '加入项目';
                  })
                } else if (action == 'edit') {
                    app.currentProjectCode = record.code;
                    app.projectModal.modalStatus = true;
                } else if (action == 'joinProject') {
                  this.$confirm({
                        title: '加入项目',
                        content: `是否加入项目？`,
                        okText: '确定加入',
                        okType: 'primary',
                        cancelText: '再想想',
                        onOk() {
                          save({project_code:record.code}).then(() => {
                            record.is_my = 1
                            if(record.member_count) {
                              record.member_count++
                            } else {
                              record.member = 1
                            }
                          });
                          return Promise.resolve();
                        }
                    });
                } else if (action == 'quit') {
                    this.$confirm({
                        title: '退出项目',
                        content: `是否退出项目？`,
                        okText: '确定退出',
                        okType: 'primary',
                        cancelText: '再想想',
                        onOk() {
                            quit(record.code).then(() => {
                              record.is_my = 3
                              if(record.member_count) {
                                record.member_count--
                              } else {
                                record.member = 0
                              }
                                // app.dataSource.splice(index, 1);
                                // app.init();
                            });
                            return Promise.resolve();
                        }
                    });
                } else if (action == 'del') {
                    let mock = this.getUrlQuery('mock')
                    if(!mock) {
                      notice({title: '暂未实现'}, 'notice', 'error', 5);
                      throw new Error('暂未实现')
                    }
                    this.$confirm({
                        title: '确定放入回收站？',
                        content: `一旦将项目「${this.currentProject.name}」放入回收站，所有与项目有关的信息将会被放入回收站`,
                        okText: '放入回收站',
                        okType: 'danger',
                        cancelText: '再想想',
                        onOk() {
                            recycle(record.code).then(() => {
                                app.dataSource.splice(index, 1);
                                // app.init();
                            });
                            return Promise.resolve();
                        }
                    });
                } else if (action == 'collect') {
                    const type = record.collected ? 'cancel' : 'collect';
                    collect(record.code, type).then(() => {
                        app.$set(app.dataSource[index], 'collected', !record.collected);
                        record.collected = type == 'collect'
                        if (this.requestData.type == 'collect') {
                            // app.dataSource.splice(index, 1);
                        }
                    });
                }
            },
            updateProject(data) {
                this.dataSource[this.currentProjectIndex] = JSON.parse(JSON.stringify(data));
            },
            handleSubmit() {
                let app = this;
                app.form.validateFields(
                    (err) => {
                        if (!err) {
                            app.handleOk();
                        }
                    })
            },
            handleOk() {
                let app = this;
                app.actionInfo.confirmLoading = true;
                let obj = app.form.getFieldsValue();
                if (app.newData.code) {
                    //编辑
                    obj.projectCode = app.newData.code;
                } else {
                    //新增
                    Object.assign(obj, app.newData);
                    //设置项目封面20200202
                    var j,len;
                    for(j = 0,len=this.templateList.length; j < len; j++) {
                        if(obj && obj.templateCode == this.templateList[j].code ){
                            obj.cover = this.templateList[j].cover;
                            break;
                        }
                    }
                }

                doData(obj).then(res => {
                    app.actionInfo.confirmLoading = false;
                    if (!checkResponse(res)) {
                        return;
                    }
                    app.form.resetFields();
                    app.newData = {id: 0};
                    app.actionInfo.modalStatus = false;
                    app.init();

                });
            },
            handleSearchSubmit() {
                let app = this;
                app.searchForm.validateFields(
                    (err) => {
                        if (!err) {
                            app.search();
                        }
                    })
            },
            search() {
                let obj = this.searchForm.getFieldsValue();
                Object.assign(this.requestData, obj);
                this.init();
            },
        }
    }
</script>
<style lang="less">
    @import "~ant-design-vue/lib/style/themes/default";

    .project-list-index {
        .project-list {
            .ant-list-item-meta-avatar {
                .ant-avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 3px;
                }
            }

            .ant-list-item-content {
                .other-info {
                    display: flex;

                    .info-item {
                        display: flex;
                        flex-direction: column;
                        padding-left: 48px;
                    }

                    .schedule {
                        width: 250px;
                    }
                }
            }

            .ant-list-item-action {
                .anticon:hover {
                    svg {
                        color: @primary-color;
                    }
                }
            }
        }
    }
</style>
